<template>
	<view>
		<uni-nav-bar statusBar="true" :fixed="true" :border="false" backgroundColor="#eff3f7">
			<view class="index-top-nav-title">
				<!-- {{i18n.index}} -->
				<view class="left" @tap.stop="back">
					<uni-icon type="back" color="#ffffff" size="30"></uni-icon>
				</view>
				<view class="content">
					{{i18n.AssetBreakdown}}
				</view>
				<view>
				</view>
			</view>
		</uni-nav-bar>
		<view class="detail-content">
			<view class="title">
				{{i18n.index_title}}（USDT）
			</view>
			<view class="detail-cont">
				<view class="item">
					<view>{{info.balance}}</view>
					<text>≈ {{info.balance}} $</text>
				</view>
				<view class="item">
					<view class="btn" @tap.stop="transfer">
						{{i18n.InternalTransfer}}
					</view>
					<view class="btn" @tap.stop="Collection">
						{{i18n.Collection}}
					</view>
				</view>
			</view>
		</view>
		<view class="detail-list">
			<view class="detail-list-title">
				{{i18n.AssetRecord}}
			</view>
			<template v-if="list.length">
				<block v-for="(item,index) in list" :key="index">
					<view class="list">
						<view class="item">
							<view>{{i18n.TransferInto}}</view>
							<text>注册赠送</text>
						</view>
						<view class="item">
							<view>+{{item.number}} {{info.title_en}}</view>
							<text>{{item.update_time}}</text>
						</view>
					</view>
				</block>
			</template>
			<template v-else>
				<view class="nodata">{{i18n.nodata}}</view>
			</template>
		</view>
	</view>
</template>

<script>
	import uniIcon from '@/components/uni-icon/uni-icon.vue';
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
	import {mapGetters} from 'vuex';
	import {fetch, showToast, pageto, forceUpdate, check_login} from '@/common/js/util.js'
	export default {
		computed:  {
			i18n() {
				return this.$t('message');
			},
			...mapGetters([
				'getRequestUrl',
				"getLoginInfo",
				'getLangType',
				'getLang'
			])
		},
		components:{
			uniNavBar,uniIcon
		},
		data() {
			return {
				info: '',
				page:1,
				list:[]
			}
		},
		onLoad(item) {
			this.info = JSON.parse(item.item);
			this.page=1;
			this.list = [];
			this.getHistory();
		},
		onShow() {
			this.page=1;
			this.list = [];
			this.getHistory();
		},
		onPullDownRefresh() {
			this.page=1;
			this.list = [];
			this.getHistory();
			let timer = setTimeout(()=>{
				uni.stopPullDownRefresh()
				clearTimeout(timer)
			},500)
		},
		onReachBottom() {
			this.getHistory();
		},
		methods:{
			Collection(){
				uni.navigateTo({
					url:`/pages/wall/collection?item=${JSON.stringify(this.info)}`
				})
			},
			transfer(){
				uni.navigateTo({
					url:`/pages/wall/transfer?item=${JSON.stringify(this.info)}`
				})
			},
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			getHistory(){
				let url = this.getRequestUrl + '/api/wallet/history';
				let data = {
					id:this.getLoginInfo.id,
					token:this.getLoginInfo.token,
					page:this.page,
					rows:10,
					type:0,
					token_id:this.info.tokenid
				}
				fetch(url,data,"POST").then(res=>{
					console.log(res);
					if(res.data.code){
						if(res.data.data.data.length >0){
							return
						}
						if(this.page==1){
							this.list = res.data.data.data;
						}else{
							this.list = this.list.concat(res.data.data.data)
						}
						this.page ++
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.index-top-nav-title{
		// padding-left: 30upx;
		width: 100%;
		background: linear-gradient(to right,#32B9FF,#1D7DFF);
		color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.content{
			font-size: 37upx;
			text-align: center;
		}
	}
	.detail-content{
		padding:51upx 30upx 48upx;
		border-bottom: 20upx solid #D5DFEB;
		.title{
			color: #818181;
			font-size: 25upx;
		}
		.detail-cont{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.item{
				view{
					font-size: 36upx;
					font-weight: bold;
					color: #000000;
					&.btn{
						width: 177upx;
						height: 58upx;
						font-size:25upx;
						text-align: center;
						line-height: 58upx;
						border-radius:10upx;
						&:first-child{
							color: #FFFFFF;
							background-color: #1D7DFF;
							margin-bottom: 19upx;
						}
						&:last-child{
							color: #1D7DFF;
							background-color: #DBE9FC;
						}
					}
				}
				text{
					font-size:24upx;
				}
			}
		}
	}
	.detail-list{
		.nodata{
			text-align: center;
			padding-top: 60upx;
			color: #6A6A6A;
		}
		.detail-list-title{
			padding: 37upx 30upx 0;
			font-size: 28upx;
			font-weight: bold;
			color: #2D2D2D;
		}
		.list{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 46upx 30upx ;
			border-bottom: 1upx solid #EEEEEE;
			.item{
				view{
					color: #000000;
					font-size: 27upx;
				}
				text{
					color: #6A6A6A;
					font-size: 24upx;
				}
				&:last-child{
					view{
						color: #E43949;
						font-weight: bold;
						text-align: right;
						font-size: 27upx;
					}
					text{
						color: #6A6A6A;
						text-align: right;
						font-size: 24upx;
					}
				}
			}
		}
	}
</style>
